<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.bxslider.js"></script>

    <title>HomeTown</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/icons.css">
    <link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
    <!--region 导航栏消失-->
    <script>
        $(document).scroll(function () {
            if($(document).scrollTop()===0) {
                $("#header").removeClass("headroom--not-top headroom--unpinned");
                $("#header").addClass("headroom--pinned headroom--top");
            } else {
                $("#header").removeClass("headroom--pinned headroom--top");
                $("#header").addClass("headroom--not-top headroom--unpinned");
            }
            console.log($(document).scrollTop());
        })
    </script>
    <!--endregion-->
    <script type="text/javascript">
        $(document).ready(function(){

            $('.slider7').bxSlider({

                slideWidth: 400,

                infiniteLoop: false,

                hideControlOnEnd: true,

                slideMargin: 10,
                pager: false

            });

        });
    </script>

    <style>


        .show {
            background: #eee;
            margin-top: 30px;
            width: 500px;
            height: 150px;
            margin: 0 auto;
        }


        .text {

            display: flex;
            margin: 0 auto;
            margin-top: 40px;
            width: 1200px;
            height: 300px;
        }
        .slide img{
            width: 500px;
            height: 400px;
        }
        .paragraph{
            padding: 30px;
            margin-bottom: 20px;
            background: #f4f4f4;
        }
        #wuyue{
            background-color: #f4f4f4;
            width: 1000px;
            height: 330px;
            margin-right: -100px;
            margin-left: 0px;
            padding-top: 100px;
            padding-right: 400px;
        }
    </style>

</head>
<body>
<header id="header" class="headroom headroom--not-bottom headroom--pinned headroom--top" onscroll="myFunction()">
    <div id="header--bg" onscroll="myFunction()">
        <div class="d-flex align-items-center justify-content-end">

            <div id="gnav">
                <nav>
                    <ul>
                        <li><a href="./brand.html"><span>Brand</span></a></li>
                        <li><a href="./portfolio.html"><span>Portfolio</span></a></li>
                        <li><a href="./hometown.html"><span>Hometown</span></a></li>
                        <li><a href="./about.html"><span>About</span></a></li>
                        <li><a href="./contact.html"><span>Contact</span></a></li>
                        <li><a href="./index.html#hometown"><img src="./images/logo.svg"  width="20%" style="position: relative;top: -10px;left: 20px"/></a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</header>
<main id="index">
    <div id="main--image" class="main--hometown active">
        <div class="container">
            <h2 id="main--text">Hometown</h2>
        </div>
    </div>
</main>

<div class="row justify-content-between" style="flex-wrap: nowrap; margin-top: 200px">
    <div id="wuyue" style="background-color: #f4f4f4;">
        <p style="position: relative;left: 350px">「五岳归来不看山 黄山归来不看岳」</p>
        <p style="position: relative;left: 350px">「五岳より帰り来たれば、山を見ず、黄山より帰</p>
        <p style="position: relative;left: 350px">  り来たれば、五岳を見ず」</p>
    </div>
    <div class="col-md-6" style="padding-top: 50px">
        <img src="images/hometown/21.png" />
    </div>
</div>

<div class="row justify-content-center" style="margin-top: 200px">
    <div style="display: flex;flex-direction: column;justify-content: start;">
        <div class="slider7">

            <div class="slide"><img src="images/hometown/1.jpg" ></div>

            <div class="slide"><img src="images/hometown/2.jpg" ></div>

            <div class="slide"><img src="images/hometown/3.jpg" ></div>

            <div class="slide"><img src="images/hometown/4.jpg" ></div>

        </div>
        <div style="border:1px solid #000000;margin-top: 50px;margin-bottom: 30px"></div>
        <div>
            <div class="paragraph">
            <p>黄山以奇松，怪石，云海，温泉 "四绝" 著称于世。</p>
            </div>
            <div class="paragraph">
            <p>黄山雄踞风景秀丽的安徽南部，是我国最著名的山岳风景区之一。<br/>黄山集名山之长：泰山之雄伟，华山之险峻，衡山之烟云，庐山之飞瀑，<br/>雁荡山之巧石，峨眉山之清凉。</p>
            </div>
        </div>
    </div>
</div>


<div class="row justify-content-end" style="margin-top: 100px">
    <div class="row col-4" style="flex-direction: column;align-items: start;margin-right: 150px">
        <div style="border:1px solid #000000;margin-top: 50px;margin-bottom: 50px;width: 100%" ></div>
        <h3>屯溪区，是安徽省黄山市一个市辖区，位于安徽省南部。</h3>
        <span>屯溪是新安文化的中心，孕育了享誉中外的徽商、徽菜、徽剧、徽派建筑、徽派盆景、新安医学、新安画派等，重点文物保护单位有戴震纪念馆、程大位故居及纪念馆、程氏三宅、老大桥等，屯溪老街为国家级历史文化保护区。</span>
    </div>
    <img src="images/hometown/41.png" style="margin-right: 0">
</div>

<footer id="footer" style="margin-top: 300px">
    <div class="container pos-r">
        <div class="ft--body">
            <div class="row justify-content-between">
                <div class="col-lg-5 order-lg-2">
                    <div id="foot-contact" class="row flex-column justify-content-around align-items-start" style="position: relative;top: -200px;padding: 50px">
                        <h3 class="mb40 z-index-99">Contact</h3>
                        <p class="mb30 z-index-99">著名奶茶鉴定家。<br>国家精准扶贫项目重点帮扶对象。</p>
                        <p class="z-index-99"><span>TEL:</span>139 6550 1155</p>
                        <p class="z-index-99"><span>EMAIL:</span>806632876@qq.com</p>
                    </div>
                </div>
                <div class="col-lg-7 order-lg-1 row justify-content-around align-items-start">
                    <img class="col-2" src="./images/logo-foot.svg" alt="Invincible Hair MADA">
                    <div class="d-none d-lg-block col-8">
                        <div class="row mb60">
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/concept/">Brand</a></li>
                                    <li><a href="/About/">About</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/recruit/">Portfolio</a></li>
                                    <li><a href="/contact/">Contact</a></li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="ft-nav">
                                    <li><a href="/news/">Hometown</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>




</body>
</html>